<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>基于阿里云OSS存储的图床</title>
  <script th:src="@{/js/jquery-1.8.2.min.js}"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #submit {
      margin-left: 15px;
    }

    .preview_box img {
      width: 200px;
    }
  </style>
</head>
<body>

<form action="/oss/uploadFile" enctype="multipart/form-data" method="post">
  <div class="form-group" id="group">
    <input type="file" id="img_input" name="file" accept="image/*">
    <label for="img_input" ></label>
  </div>
  <button type="submit" id="submit">上传</button>
  <!--预览图片-->
  <div class="preview_box"></div>
</form>
<script type="text/javascript">

  $("#img_input").on("change", function (e) {
    var file = e.target.files[0]; //获取图片资源
    // 只选择图片文件
    if (!file.type.match('image.*')) {
      return false;
    }
    var reader = new FileReader();
    reader.readAsDataURL(file); // 读取文件
    // 渲染文件
    reader.onload = function (arg) {

      var img = '<img class="preview" src="' + arg.target.result + '" alt="preview"/>';
      $(".preview_box").empty().append(img);
    }
  });
</script>
</body>
</html>